light mode
night mode
অ্যাজাক্স (Ajax)

উদাহরণ সহ Error Logging এবং Debugging

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে Error Handling (Error Handling in Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax রিকোয়েস্টের সময় ত্রুটি লগিং এবং ডিবাগিং করা অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ডেভেলপারদের সমস্যার উৎস খুঁজে পেতে এবং তা সমাধান করতে সাহায্য করে। Error Logging এর মাধ্যমে আপনি ত্রুটি সম্পর্কে বিস্তারিত তথ্য সংরক্ষণ করতে পারেন এবং Debugging এর মাধ্যমে আপনি সেই ত্রুটি চিহ্নিত করে সংশোধন করতে পারেন। নিচে একটি উদাহরণ সহ Ajax এর মাধ্যমে Error Logging এবং Debugging কিভাবে করা যায়, তা ব্যাখ্যা করা হয়েছে।

উদাহরণ: Ajax Request Error Logging এবং Debugging

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Error Logging and Debugging Example</title>
</head>
<body>
    <h1>Ajax Request with Error Logging and Debugging</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- ডেটা বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/101", true); // একটি ভুল URL (404 এরর তৈরি করতে)
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 200) { // রিকোয়েস্ট সফল হলে
                var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                document.getElementById("data-container").innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            } else {
                // Error Logging: ত্রুটি লগ করা
                logError(xhr.status, xhr.statusText, xhr.responseURL);

                // কাস্টম এরর মেসেজ দেখানো
                document.getElementById("data-container").innerHTML = `
                    Error ${xhr.status}: ${xhr.statusText}. Please try again later.
                `;
            }
        }
    };
    
    // ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
    xhr.onerror = function() {
        logError(xhr.status, "Network error occurred", xhr.responseURL);
        document.getElementById("data-container").innerHTML = "Network error occurred! Please check your internet connection.";
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

// ত্রুটি লগ করার ফাংশন
function logError(status, message, url) {
    var errorMessage = `Error ${status}: ${message} at ${url}`;
    console.error(errorMessage);

    // যদি আপনি সার্ভারে লগ করতে চান, তাহলে একটি POST রিকোয়েস্ট ব্যবহার করে লগ করতে পারেন
    var logXhr = new XMLHttpRequest();
    logXhr.open("POST", "https://example.com/log", true);
    logXhr.setRequestHeader("Content-Type", "application/json");
    logXhr.send(JSON.stringify({ status: status, message: message, url: url, timestamp: new Date().toISOString() }));
}

ব্যাখ্যা:

১. XMLHttpRequest অবজেক্ট তৈরি করা:

  • fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।

২. রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/101", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে। এখানে ইচ্ছাকৃতভাবে একটি ভুল URL ব্যবহার করা হয়েছে, যাতে 404 এরর তৈরি হয়।

৩. onreadystatechange ইভেন্টে ত্রুটি লগিং:

  • যদি xhr.status !== 200 হয়, তাহলে logError() ফাংশন কল করা হয়েছে, যা স্ট্যাটাস কোড, স্ট্যাটাস টেক্সট, এবং URL লগ করে।
  • console.error() ব্যবহার করে ত্রুটি ব্রাউজারের কনসোলে লগ করা হয়েছে, যা ডিবাগিংয়ের জন্য অত্যন্ত সহায়ক।
  • একটি POST রিকোয়েস্ট ব্যবহার করে ত্রুটি সার্ভারে পাঠানো হয়েছে, যাতে লগ সংরক্ষণ করা যায়।

৪. onerror ইভেন্ট হ্যান্ডলিং:

  • যদি নেটওয়ার্কের কারণে কোনো সমস্যা হয়, যেমন ইন্টারনেট কানেকশন না থাকা, xhr.onerror ইভেন্ট হ্যান্ডলার সেই ত্রুটি হ্যান্ডেল করে এবং logError() ফাংশন কল করে লগ করে।

৫. Error Logging ফাংশন (logError):

  • logError() ফাংশন ত্রুটি তথ্য সংগ্রহ করে কনসোলে লগ করে এবং সার্ভারে পাঠায়।
  • status, message, url, এবং টাইমস্ট্যাম্প (বর্তমান সময়) লগ করা হয়েছে, যা ডিবাগিংয়ের জন্য দরকারী।

Debugging টিপস:

১. Console Logging ব্যবহার করা:

  • console.log() এবং console.error() এর মাধ্যমে ত্রুটি বা ডেটা কনসোলে লগ করুন। এটি ডেভেলপারদের সমস্যার স্থান চিহ্নিত করতে সাহায্য করে।

২. Network Tab পর্যবেক্ষণ করা:

  • ব্রাউজারের ডেভেলপার টুলের "Network" ট্যাব ব্যবহার করে রিকোয়েস্ট এবং রেসপন্স পর্যবেক্ষণ করুন। এটি স্ট্যাটাস কোড, হেডার, এবং রেসপন্স দেখায়।

৩. Breakpoints সেট করা:

  • ডেভেলপার টুলের "Sources" ট্যাব ব্যবহার করে ব্রেকপয়েন্ট সেট করুন, যাতে আপনি স্টেপ বাই স্টেপ কোড এক্সিকিউশন পর্যবেক্ষণ করতে পারেন।

৪. Response Data পরীক্ষা করা:

  • Ajax রিকোয়েস্টের রেসপন্স ডেটা কনসোলে লগ করুন এবং নিশ্চিত করুন যে এটি প্রত্যাশিত ফরম্যাটে আসছে কি না।

Error Logging এর ধাপ:

  1. স্ট্যাটাস কোড এবং মেসেজ লগ করা: console.error() ব্যবহার করে স্ট্যাটাস কোড এবং মেসেজ লগ করা, যা ত্রুটি সম্পর্কে দ্রুত তথ্য দেয়।
  2. সার্ভারে লগ পাঠানো: POST রিকোয়েস্ট ব্যবহার করে ত্রুটি সংরক্ষণ করা, যাতে সার্ভার সাইড লগ তৈরি করা যায়।
  3. Debugging এর সময় লগ পরীক্ষা করা: ব্রাউজারের কনসোল ব্যবহার করে লগ পরীক্ষা করা এবং সমস্যা সমাধানের জন্য উপযুক্ত পদক্ষেপ নেওয়া।

সারসংক্ষেপ:

  • Ajax রিকোয়েস্টের সময় ত্রুটি লগিং এবং ডিবাগিং করার জন্য console.error() এবং onerror ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়।
  • সার্ভারে ত্রুটি লগ করতে POST রিকোয়েস্ট ব্যবহার করা যায়, যাতে সার্ভার সাইডে ত্রুটি সংরক্ষণ করা যায়।
  • Debugging টুল ব্যবহার করে কোড পর্যবেক্ষণ, ত্রুটি খুঁজে বের করা, এবং সংশোধন করা সহজ হয়।

এই উদাহরণটি অনুসরণ করে আপনি Ajax রিকোয়েস্টের সময় ত্রুটি লগিং এবং ডিবাগিং করতে পারবেন, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও নির্ভরযোগ্য এবং ডিবাগ-ফ্রেন্ডলি করে তুলবে।

আরও দেখুন...

উদাহরণ সহ Error Logging এবং Debugging

or

Don't have an account? Register

Promotion